<template>
  <el-table :data="filterTableData" height="250" style="width: 100%">
    <el-table-column prop="name" label="功能名称" />
    <el-table-column prop="technology" label="技术栈" />
    <el-table-column prop="describe" label="功能描写" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="请输入功能名称" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

const search = ref('')
const tableData = [
  {
    name: '太阳系',
    technology: 'G6 + g6-extension-3d',
    describe: '太阳系的公转和自转3D呈现',
  }
]
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
</script>